// draggable.js
import Vue from 'vue'

Vue.directive('draggable', {
  bind(el, binding, vnode) {
    let dragging = false
    let dragStartPosition = null
    let dragStartMousePosition = null
    let initialPosition = { x: 0, y: 0 }
    let newPosition = { x: 0, y: 0 }
    const handleDragStart = (e) => {
      dragStartMousePosition = { x: e.clientX, y: e.clientY }
      initialPosition = { x: newPosition.x, y: newPosition.y }
      dragStartPosition = initialPosition
      dragging = true
    }

    const handleDrag = (e) => {
      if (dragging) {
        const dx = e.clientX - dragStartMousePosition.x
        const dy = e.clientY - dragStartMousePosition.y

        newPosition = {
          x: dragStartPosition.x + dx,
          y: dragStartPosition.y + dy,
        }
        console.log(newPosition.x, newPosition.y, 'newPosition')
        el.style.transform = `translate3d(${newPosition.x}px, ${newPosition.y}px, 0)`

        dragStartMousePosition = { x: e.clientX, y: e.clientY }
        dragStartPosition = newPosition
      }
    }

    const handleDragEnd = (e) => {
      dragging = false
    }

    el.addEventListener('mousedown', handleDragStart)
    window.addEventListener('mousemove', handleDrag)
    window.addEventListener('mouseup', handleDragEnd)
  },
})
